<!DOCTYPE html> 
<html>
<head>
  <title>Page Title</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1" >
 <link rel="stylesheet" href="css/jquery.mobile.icons-1.4.5.min.css">
  <link rel="stylesheet" href="css/theme-classic.css">
  <link rel="stylesheet" href="css/jquery.mobile.structure-1.4.5.min.css">
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/jquery.mobile-1.4.5.min.js"></script>

 <style type="text/css">


.col{
width:48%;
float:left;
padding:4px;
text-align: justify;
}

#myPopupDialog{
  width: 100%;
  margin:auto;
  text-align: justify;
}

#uno{
 background-image: url("img/Senialetica2.png");
 background-repeat:no-repeat;
  background-position:center;
  width:44%;
  height:110px;
  padding:6px;
  margin-top:20px;
  float:left;
}

#dos{
 background-image: url("img/Ubicacion2.png");
 background-repeat:no-repeat;
  background-position:center;
  width:44%;
  height:110px;
  padding:6px;
  margin-top:20px;
  float:left;
}

#tres{
 background-image: url("img/Leyes.png");
 background-repeat:no-repeat;
  background-position:center;
  width:44%;
  height:110px;
  padding:6px;
  margin-top:20px;
  float:left;
}

#cuatro{
 background-image: url("img/Qsomos2.png");
 background-repeat:no-repeat;
  background-position:center;
  width:44%;
  height:110px;
  padding:6px;
  margin-top:20px;
  float:left;
}

.ui-content{
  margin:0 auto;
  margin-top:0%;
  text-align: center;
  height:auto;
  background-color:#ffffff;
  height:1000px;
}

.ui-content1{
  margin:0 auto;
  margin-top:20%;
  text-align: center;
  height:auto;
  
}

</style>

<script type="text/javascript">
$(window).on("orientationchange",function(){
  if(window.orientation == 0) // Portrait
  {
    $(".ui-content1").css({"margin-top":"20%"});
  }
  else // Landscape
  {
    $(".ui-content1").css({"margin-top":"-5%"});
  }
});
</script>
</head>

<body>

<div data-role="page" id="menu" class="ui-responsive-panel" data-theme="b">
<!--Cabecera-->
    <div data-role="header"  data-fullscreen="true">
      <a href="index.html" rel="external" class="ui-btn ui-corner-all ui-icon-back ui-btn-icon-notext" data-transition="back"></a>
      <a href="#myPanel" class="ui-btn ui-corner-all ui-icon-bars ui-btn-icon-notext"> </a>
      <h1>Menú Principal</h1>
    </div>

<!--Contenido-->    
<div data-role="main" class="ui-content">
  <div class="ui-content1">
          <div id="uno" onclick="senial()"></div>
            <div id="dos" onclick="ubica()"></div>
            <div id="tres" onclick="regla()"></div>
            <div id="cuatro" onclick="qsomos()"></div>
  </div>
</div>

<div data-role="panel" id="myPanel" data-display="reveal" data-position="right">
   <p>Haga clic sobre un elemento del menú, este le conducirá a una nueva ventana.</p>
   <br>
   <p>Contactenos</p>
   <div data-role="collapsible" data-inset="false" data-mini="true" data-collapsed-icon="phone" data-expanded-icon="phone">
    <p>(271)-147-7978</p>
   </div>
</div>

    <!--Pie de Pagina--> 
<div data-role="footer"  data-position="fixed" data-fullscreen="true">
  <h1>Auxilio Vial</h1>
</div> 

  </div>

</body>

<script type="text/javascript">
function senial(){
 document.location="senialetica.html";
}

function ubica(){
 document.location="maps.html";
}
function regla(){
 document.location="reglamento_transito.html";
}

function qsomos(){
 document.location="quieneso.html";
}
</script>
</html>